<template>
<q-dialog class="pie-dialog" v-model="show" persistent maximized>
  <q-card class="full-width full-height flex bg-white screen">
    <q-card-section class="row items-center q-pb-none full-width">
      <div class="text-h6 text-weight-bold">{{title}}</div>
      <q-space />
      <q-btn @click="hideDialog" flat round size="sm" color="primary" icon="iconfont icontubiao-133">
        <q-tooltip>关闭</q-tooltip>
      </q-btn>
    </q-card-section>
    <q-card-section class="dialog-content">
      <div class="chart" ref="dialogChart"></div>
      <ul class="explain">
        <li v-for="(item,index) in data" :key="index">
          <div class="name">
            <i class="round" :style="{'background-color': chartColor[item.name]}"></i>
            {{item.keyName}}
          </div>
          <div class="value">{{item.percent}}%</div>
        </li>
      </ul>
    </q-card-section>
  </q-card>
</q-dialog>
</template>

<script>
import echarts from 'echarts'
import { secondToString } from '../../../assets/js/util'

export default {
  props: {
    chartColor: {
      type: Object,
      default: () => {
        return {
          process: '#18D77F', // 加工
          stop: '#FF8559', // 停机
          breaks: '#999999', // 断开
          offLine: '#666666', // 离线
          alert: '#E43434', // 报警
          changeLine: '#AC70F2', // 换线
          fault: '#F7B82D', // 故障
          repair: '#44D8C6' // 维修
        }
      }
    },
    chartExplain: {
      type: Object,
      default: () => {
        return {
          process: '加工',
          stop: '停机',
          breaks: '断开',
          offLine: '离线',
          alert: '报警',
          changeLine: '换线',
          fault: '故障',
          repair: '维修'
        }
      }
    }
  },
  data () {
    return {
      show: false,
      title: '',
      data: [],
      chart: null,
      total: 0,
      type: 'percent'
    }
  },
  methods: {
    // 显示弹框
    showDialog (info, total, title, type) {
      this.show = true
      this.total = total
      this.title = title
      this.type = type
      this.$nextTick(() => {
        this.initInfo(info, type)
      })
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (info) {
      let data = []
      console.log(info)
      for (let key in info) {
        let item = {
          value: info[key],
          keyName: this.chartExplain[key],
          name: key
        }
        if (this.type === 'time') {
          item.time = secondToString(info[key])
        }
        data.push(item)
      }
      let total = data.reduce((total, item) => {
        return total + Number(item.value)
      }, 0)
      data = data.map(item => {
        return {
          ...item,
          percent: total === 0 ? 0 : (item.value / total * 100).toFixed(2)
        }
      })
      console.log(data)
      this.data = data
      this.setOption(data, total)
    },
    // 显示echart
    setOption (data, total) {
      let self = this
      console.log(self.type)
      const option = {
        title: {
          text: self.type === 'percent' ? total + '台' : secondToString(total),
          subtext: '共计',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 28,
            fontWeight: 'bold',
            color: ['#333']
          },
          subtextStyle: {
            color: '#666',
            fontSize: 20
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (res) => {
            if (self.type === 'percent') {
              return res.data.value + '台'
            } else if (this.type === 'time') {
              return res.data.time
            }
          },
          padding: [10, 20],
          textStyle: {
            fontSize: 28
          }
        },
        grid: {
          bottom: 0,
          left: 0,
          right: 0,
          top: 0
        },
        legend: {
          show: false
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        series: [
          // 主要展示层的
          {
            radius: ['43%', '88%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return self.chartColor[params.name]
                }
              }
            },
            data: data
          },
          // 边框的设置
          {
            radius: ['86%', '88%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgba(250,250,250,0.5)'
              }
            },
            data: [{
              value: 1
            }]
          }
        ]
      }
      this.chart = echarts.init(this.$refs.dialogChart)
      this.chart.setOption(option)
    },
    // 提交
    submit () {
      const data = {
      }
      this.submitting = true
      this.$emit('submit', this.state, data)
    }
  }
}
</script>

<style scoped lang="stylus">
.dialog-content{
  height calc(100vh - 50px)
  display flex
  justify-content center
  align-items center
}
.chart{
  width calc(100vh - 50px)
  height calc(100vh - 50px)
  flex calc(100vh - 50px) 0
}
.explain{
  flex 144px 0
  margin-left 50px
  font-size 18px
  /*display flex*/
  /*flex-direction column*/
  /*justify-content center*/
  li{
    display inline-block
    width 50%
    &:nth-child(odd){
      margin-right 20px
    }
    .round{
      margin-right 10px
      display inline-block
      width 16px
      height 16px
      border-radius 8px
      vertical-align middle
    }
    .name{
      margin 19px 0 9px
    }
  }
}
</style>
